<template>
	<view>
		<view class="header">
			<input type="text" placeholder="搜索">
			<view class="gou">
				<image src="../../static/img/gw.png" mode=""></image>
			</view>
		</view>
		<view class="qing">
			<view class="qing-1">
				<image src="../../static/img/wd.png" mode=""></image>
				<text>请选择团长</text>
			</view>
			<view class="fan">
				<image src="../../static/img/fan.png" mode=""></image>
			</view>
		</view>
		<!-- 轮播图 -->
		<swiper class="sw" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item,index in swiperData" :key="item.id">
				<view class="swiper-item">
					<image :src="item.pic" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!--  -->
		<view class="kuai">
			<view class="item" v-for="item in ImageData" :key="item.id">
				<image :src="item.pic" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "one-vue",
		data() {
			return {
				swiperData: [{
						id: 0,
						pic: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.oYZ3KAzB3sIzcw0GmZpXewHaEK?w=187&h=105&c=7&r=0&o=5&pid=1.7'
					},
					{
						id: 1,
						pic: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.BYMZFvSNemf8HleUdWwr7gHaEK?w=187&h=105&c=7&r=0&o=5&pid=1.7'
					},
					{
						id: 2,
						pic: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.R975gRit1VoGMSmz765AwQHaEo?w=187&h=117&c=7&r=0&o=5&pid=1.7'
					},
					{
						id: 3,
						pic: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.-o-XLM1DpNTKsS1aci2fNAHaEK?w=187&h=105&c=7&r=0&o=5&pid=1.7'
					}
				],
				ImageData: [{
						id: 0,
						pic: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.sDg-YiZo2HlIyV3Q25RHrwHaKs?w=187&h=271&c=7&r=0&o=5&pid=1.7'
					},
					{
						id: 1,
						pic: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.sDg-YiZo2HlIyV3Q25RHrwHaKs?w=187&h=271&c=7&r=0&o=5&pid=1.7'
					},
					{
						id: 2,
						pic: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.sDg-YiZo2HlIyV3Q25RHrwHaKs?w=187&h=271&c=7&r=0&o=5&pid=1.7'
					},
					{
						id: 3,
						pic: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.sDg-YiZo2HlIyV3Q25RHrwHaKs?w=187&h=271&c=7&r=0&o=5&pid=1.7'
					},
					{
						id: 4,
						pic: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.sDg-YiZo2HlIyV3Q25RHrwHaKs?w=187&h=271&c=7&r=0&o=5&pid=1.7'
					},
					{
						id: 5,
						pic: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.sDg-YiZo2HlIyV3Q25RHrwHaKs?w=187&h=271&c=7&r=0&o=5&pid=1.7'
					},
					{
						id: 6,
						pic: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.sDg-YiZo2HlIyV3Q25RHrwHaKs?w=187&h=271&c=7&r=0&o=5&pid=1.7'
					},
					{
						id: 7,
						pic: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.sDg-YiZo2HlIyV3Q25RHrwHaKs?w=187&h=271&c=7&r=0&o=5&pid=1.7'
					},

				]

			};
		}
	}
</script>

<style lang="less">
	.header {
		width: 100%;
		height: 70rpx;

		text-align: center;
		display: flex;
		justify-content: space-between;

		input {
			width: 85%;
			height: 100%;
			border-radius: 50px;
			margin-left: 20rpx;
			background-color: rgb(247, 247, 247);
		}

		.gou {
			width: 10%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.qing {
		width: 100%;
		height: 200rpx;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.qing-1 {
			display: flex;
			align-items: center;
		}

		image {
			width: 200rpx;
			height: 200rpx;
		}

		text {
			font-size: 40rpx;
			margin-left: 20rpx;
		}

		.fan {
			width: 50rpx;
			height: 50rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.sw {
		width: 100%;
		height: 400rpx;
	}

	.swiper-item image {
		width: 100%;
		height: 400rpx;
	}

	.kuai {
		width: 100%;
		height: 500rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;

		.item {
			width: 180rpx;
			height: 180rpx;
			background-color: saddlebrown;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
